import { defineComponent } from 'vue';
import { addGrade, GradeList, delGrade, updateGrade } from '@/api/dengji';
import { ElMessage, ElMessageBox } from 'element-plus';

export default defineComponent({
   data() {
        return {
            // 新增弹窗
            dengji: {
                grade: '',
                name: '',
                condition: '',
                equal: '',
                mode: '',
                price: '',
                validity: '',
                discount: '',
                multiple: '',
                state: '',
            },

            addGradeShow: false,
            // 编辑弹窗
            editDengji: {
                id: 0,
                grade: '',
                name: '',
                condition: '',
                equal: '',
                mode: '',
                price: '',
                validity: '',
                discount: '',
                multiple: '',
                state: '',
            },
            editGradeShow: false,
            search: {
                id: 0,
                grade: '',
                name: '',
                condition: '',
                equal: '',
                mode: '',
                price: '',
                validity: '',
                discount: '',
                multiple: '',
                state: '',
            },
            // 新增表单的规则
            rules: {
                grade: [{ required: true, message: '等级不能为空', trigger: 'blur' }],
                name: [{ required: true, message: '等级名称不能为空', trigger: 'blur' }],
                mode: [{ required: true, message: '新选着升级方式', trigger: 'blur' }],
                price: [{ required: true, message: '升级条件值不能为空', trigger: 'blur' }],
                validity: [{ required: true, message: '有效天数不能为空', trigger: 'blur' }],
                discount: [{ required: true, message: '支付折扣不能为空', trigger: 'blur' }],
                multiple: [{ required: true, message: '积分加速不能为空', trigger: 'blur' }],
            },
            // 等级列表
            gradeList: [],
            page: 1,
            limit: 30,
            total: 0,
       };
    },
    methods: {
        // 搜索按钮
        onSubmit() {

        },
        // 新增弹窗
        async addGradeA() {
            console.log('dengji', this.dengji);
            console.log('$refs.addfrom', this.$refs.addfrom);
            try {
                const validateRes = await (this.$refs.addfrom as any).validate();
                console.log('validateRes', validateRes);
                // 确保表单完全的通过校验规则
                const res = await addGrade(this.dengji);
                console.log('res', res);
                const { status } = res;
                if (status === 201) {
                    this.$message.success('添加成功');
                    this.addGradeShow = false;
                    this.getList();
                } else {
                    this.$message.warning('添加失败');
                }
            } catch (e) {
                // this.$message.warning('检查');
                console.log(e);
            }
        },
        // 等级列表
        async getList() {
            const $skip = (this.page - 1) * this.limit;
            const res = await GradeList({
                $skip,
                $limit: this.limit,
            });
            console.log('获取到的等级列表是', res);
            this.gradeList = res.data.data;
            this.total = res.data.total;
        },
        // 处理分页
        handeSizeChange(val: number) {
            console.log('val', val);
            this.limit = val;
            this.getList();
        },
        handlePageChange(val: number) {
            this.page = val;
            this.getList();
        },
        // 修改按钮
        handleShowEdit(row:any) {
            this.editDengji = row;
            this.editGradeShow = true;
        },
        async editDengjiOK() {
            console.log('编辑editdengji', this.editDengji);
            let { id, ...postdata } = this.editDengji;
            let res = await updateGrade(id, postdata);
            console.log('resresres', res);
            const { status } = res;
            if (status === 200) {
                this.$message.success('修改成功');
                this.editGradeShow = false;
                this.getList();
            } else {
                this.$message.warning('修改失败');
            }
        },
        // 删除按钮
        delMember(id:number) {
            ElMessageBox.confirm(
                '是否确认删除"钻石会员"的选项？',
                '系统提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                },
            ).then(async () => {
                const res = await delGrade(id);
                console.log('resres', res);
                const { status } = res;
                if (status === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    });
                    this.getList();
                } else {
                    ElMessage({
                        type: 'info',
                        message: '删除失败',
                    });
                }
              });
        },
        // 状态改变的方法
        changeSwitch(row: any, val: number, id: number) {
            console.log('valvalvalval', row.state);
            if (!val) {
                console.log('启动');
                ElMessageBox.confirm(
                    `确定启用"${row.name}"吗？`,
                    '系统提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                    },
                  )
                    .then(async () => {
                        console.log('点击了确认');
                        this.editDengji = row;
                        // console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 1;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGrade(id, postdata);
                        this.getList();
                      ElMessage({
                        type: 'success',
                        message: '启用成功',
                      });
                    }).catch(async () => {
                      this.editDengji = row;
                    //   console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 0;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGrade(id, postdata);
                        this.getList();
                    });
            } else {
                console.log('关闭');
                ElMessageBox.confirm(
                    `确定禁用"${row.name}"吗？`,
                    '系统提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                    },
                  )
                    .then(async () => {
                        this.editDengji = row;
                        // console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 0;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGrade(id, postdata);
                        this.getList();
                        ElMessage({
                            type: 'success',
                            message: '禁用成功',
                        });
                    }).catch(async () => {
                        this.editDengji = row;
                        // console.log('this.editDengji', this.editDengji);
                        let { ...postdata } = this.editDengji;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 1;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGrade(id, postdata);
                        this.getList();
                    });
            }
        },
    },
    computed: {
        // newList() {
        //     var listarr = [];
        //     for (let i = 0; i<)
        // }
    },
    mounted() {
        this.getList();
    },
});
